<template>

  <el-card>

    <el-row>

      <el-col :span="12">

        <el-row>
          <el-col :span="24">

            <el-form ref="formPasswordRef" label-width="180px">

              <el-form-item label="密码中字符串数量">
                <el-input-number v-model="fromPassword.strLength" :min="0" :max="30" ></el-input-number>
              </el-form-item>

              <el-form-item label="密码中数字数量">
                <el-input-number v-model="fromPassword.numLength" :min="0" :max="30" ></el-input-number>
              </el-form-item>

              <el-form-item label="特殊字符数量">
                <el-input-number v-model="fromPassword.specialLength" :min="0" :max="30" ></el-input-number>
              </el-form-item>

              <el-form-item label="密码总长度">
                <span>{{numSum}}</span>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" size="mini" @click="createPassword">生成密码</el-button>
                <el-button type="warning" size="mini" @click="resetPasswordGeneration">重置</el-button>
              </el-form-item>


            </el-form>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="22">

            <el-alert
              title="生成的密码"
              type="success"
              :closable="false"
              :description="passwordGenerationNum">
            </el-alert>

          </el-col>
          <el-col :span="2">
            <div></div>
          </el-col>
        </el-row>


      </el-col>

      <el-col :span="12">
        <el-image fit="contain" :src="require('@/assets/images/member/member.gif')"></el-image>
      </el-col>

    </el-row>

  </el-card>

</template>

<script>

  import http from '@/utils/http'

  export default {
    // 密码生成
    name: "PasswordGeneration",
    data(){
      return {
        // 要提交的密码信息
        fromPassword: {
          strLength: 4,
          numLength: 2,
          specialLength: 2,
        },
        // 输入框和按钮的大小
        size: 'mini',
        // 生成的密码
        passwordGenerationNum: null,
      }
    },
    methods: {
      /**
       * 生成密码
       */
      createPassword(){
        http.post("/cypher/createPassword", this.fromPassword).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.passwordGenerationNum = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 重置生成
       */
      resetPasswordGeneration(){
        this.fromPassword = {
          strLength: 4,
          numLength: 2,
          specialLength: 2,
        }
      }
    },
    // 计算属性
    computed: {
      // 计算密码总长度
      numSum: function () {
        return this.fromPassword.strLength + this.fromPassword.numLength + this.fromPassword.specialLength
      }
    },
    mounted(){

    }
  }
</script>

<style scoped>

</style>
